<template>
    <div class="note">
        <navi /> 
        <!-- 查找单词    -->
        <div class="enwordPannel m-center shadow  bg-white rounded mt-3"
        :class=" {'height-300' : tool.dropdownTran}"
        >
            <div class="search shadow  bg-white rounded d-flex flex-column justify-content-center">
                <div class="bar">
                    <div class="input-group mb-3">
                    <input type="text" class="form-control" 
                    name="英文单词查询"
                    v-validate="{
                        required: true,
                        illegalchar: true
                    }"
                    v-model="keyWord"
                    placeholder="输入单词" 
                    aria-label="Recipient's username" 
                    aria-describedby="basic-addon2">
                    <div class="input-group-append">
                        <span class="input-group-text" id="basic-addon2"
                        @click.stop="defenceCheckWord( )"
                        >查单词</span>
                    </div>
                    </div>
                </div>
                
            </div>
            <div class="explanation shadow  bg-white rounded">
                <div class="expOfEnword">
                    <span  class="explanation" >{{ keyWordExplanation }}</span>
                </div>
            </div>
            
        </div>
        <div class="extendBar m-center iconfont dripdown-icon "
        :class="{ 'rotateIcon' : tool.dropdownTran ,
        'extendBar-top-0': tool.dropdownTran
        }"        
        @click="dropdownTranslator"
        >{{tool.dropbar_title}}</div>

        <!-- 笔记内容 -->
        <div class="readingnote m-center  shadow  bg-white rounded mt-3">
            <!-- 顶层目录组建 -->
            <div class="nmenu shadow  bg-white rounded">
                <div class="nmenu-list">
                    <note-menu 
                ref="noteMenu"
                
                @onshow="makeDir"
                @CurrentItem="setCurrentItem"
                ></note-menu>
                </div>
                

            </div>
            <!-- 子目录显示组建 -->
            <div class="nmenuRef shadow  bg-white rounded">
                <explorer ref="exploreFile"  :currentItem="current.checkItemData" />
            </div>
            <transition
            
            :duration="{ enter: 1000, leave: 1000 }"
             enter-active-class="animate__animated animate__fadeInRight"
            leave-active-class="animate__animated animate__fadeOutLeft"
            >
                <!-- 在次级目录新建目录的弹层 -->
                <popup 
                v-if="popup.subDir"
                style="position: absolute !important;">
                    <sun-dir-prompt 
                    
                    ></sun-dir-prompt>
                </popup>
            </transition>
            <transition
            
            :duration="{ enter: 1000, leave: 1000 }"
             enter-active-class="animate__animated animate__fadeInRight"
            leave-active-class="animate__animated animate__fadeOutLeft"
            >
                <!-- 在次级目录新建文件的弹层 -->
                <popup 
                v-if="popup.mkfile"
                style="position: absolute !important;">
                    <new-file></new-file>
                </popup>
            </transition>

            <transition
            
            :duration="{ enter: 1000, leave: 1000 }"
             enter-active-class="animate__animated animate__fadeInRight"
            leave-active-class="animate__animated animate__fadeOutLeft"
            >
                <!-- 重命名次级目录的弹层 -->
                <popup 
                v-if="popup.rename_innerDir"
                style="position: absolute !important;">
                    <rename-innerdir></rename-innerdir>
                </popup>
            </transition>

            <!-- 查看文章的弹层 -->
            <transition
            :duration="{ enter: 600, leave: 1200 }"
             enter-active-class="animate__animated animate__zoomIn"
            leave-active-class="animate__animated animate__zoomOut"
            >
                <popup 
                v-if="popup.checkFile"
                dailog_width="80%"
                dailog_height="90%"
                style="position: absolute !important;
                padding: 2em;
                ">
                    <viewpost-art></viewpost-art>
                </popup>
            </transition>
            <!-- 编辑文章的弹层 -->
            <transition
            :duration="{ enter: 600, leave: 1200 }"
             enter-active-class="animate__animated animate__zoomIn"
            leave-active-class="animate__animated animate__zoomOut"
            >
                <popup 
                v-if="popup.editFile"
                dailog_width="90%"
                style="position: absolute !important; overflow: hidden;">
                    <edit-art></edit-art>
                </popup>
            </transition>
        </div>
        <!-- 在顶级目录新建子目录的弹层 -->
        <transition 
        name="test"
        :duration="{ enter: 1000, leave: 1000 }"
        enter-active-class="animate__animated animate__fadeInDown"
        leave-active-class="animate__animated animate__fadeOutDown">
             <popup  
             dailog_width="360px"
             v-if="popup.mkdir" >
                <addtop-toaste 
                ref="addTopToaste"
                @close="hideDialogue"></addtop-toaste>
             </popup>
        </transition>
        <!-- 删除目录 -->
        <transition 
        name="forRmDir"
        :duration="{ enter: 1000, leave: 1000 }"
        enter-active-class="animate__animated animate__fadeInDown"
        leave-active-class="animate__animated animate__fadeOutDown">
             <popup  
             dailog_width="300px"
             v-if="popup.rmDir" >
                <rm-dir-prompt ref="rmdir_prompt"></rm-dir-prompt>
             </popup>
        </transition>
    </div>
</template>

<script>
import navi from "../../outlook/navigator.vue";
import noteMenu from "./directary/dir.vue";
import popup from "../../popup/popup.vue";                        //弹层容器
import addtopToaste from "../../popup/addTopDir/addTopDir.vue";   //新建顶层目录
import explorer from "./exploreFile/exploreFile.vue";
import sunDirPrompt from "../../popup/subDir/subDir.vue";
import rmDirPrompt from "../../popup/rmDir/rmDir.vue";            //删除目录提示
import newFile from "../../popup/addFiles/addfiles.vue";          //新建文章提示
import renameInnerdir from "../../popup/subDir/renameOfDir.vue";  //重命名目录提示
import viewpostArt from "../../popup/addFiles/viewPost.vue";      //查看文章
import editArt from "../../popup/addFiles/editor.vue" //编辑文章
import { checkEnWord } from "../../../../api/homePage.js";//英文单词中文解释


//工具模块
import { tools } from "../../../../api/tools.js";


export default {
    components:{
        navi,
        noteMenu,
        popup,
        addtopToaste,
        explorer,
        sunDirPrompt,
        rmDirPrompt,
        newFile,
        renameInnerdir,
        viewpostArt,
        editArt
    },
   
    data(){
        return {
            tool:{
                dropdownTran: false,
                dropbar_title: "展开"
            },
             popup:{
                mkdir: false,
                subDir: false,
                rmDir: false,
                mkfile: false,
                rename_innerDir: false,
                editFile: false,
                checkFile: false
            },
            current:{
                checkItemData: null,
            },
            addSubLoading: false,
            keyWord:"",
            keyWordExplanation:"请填写英文单词和点击查询。。。"
        }
    },
    provide: function(){
        let that = this;
        return {
            noteAgent(){
                return that;
            },
            setAddTopDirLoading( status ){
                that.$refs.addTopToaste.setLoading( status );
            }
        }
    },
    mounted() {
        
    },
    methods:{
        //校验单词查询输入
        verifyEnCheck(){
             this.$validator.validate().then(result => {
                
                if (!result) {
                    if (this.errors.has('英文单词查询')) {
                        
                        if( this.errors.items[0].rule == 'required' ){
                            this.keyWordExplanation = "请先填写您需要查询的单词";
                            return ;
                        }
                        this.keyWordExplanation = this.errors.items[0].msg;

                        return
                    } 
                } else {
                    this.checkWord();   // 验证通过后请求接口的方法
                }
            });
        },
        //查询英文单词中文解释
        checkWord(){
            //请求单词结果
            checkEnWord(
                this.keyWord
            ).then(res=>{
                // console.log("查询结果：", res);
                this.keyWordExplanation = res.data.meaning;
            }).catch(err=>{

            });
        },
        //防抖处理点击查询按钮
        defenceCheckWord: tools.debounceWithTrigger(function(){
            this.verifyEnCheck();
        }, 1000 , true),
        dropdownTranslator(){
            let status = this.tool.dropdownTran ;
            this.tool.dropdownTran = !status;
            if( !status ){
                this.tool.dropbar_title = "收起";
                return ;
            }
            this.tool.dropbar_title = "展开";
        },
        setCurrentItem( item ){
            this.current.checkItemData = item;
            this.$store.commit('setCurrentItem' , item);
        },
        setaddSubLoading( status ){
            this.addSubLoading = status;
        },
        
        makeDir( ){
            this.popup.mkdir = true;
        },
        hideDialogue(){
            this.popup.mkdir = false;

        },
        setDir( item , fn ){
            //设置顶层目录
            this.$refs.noteMenu.setTopdir(item , fn );
        },
       
        

    }
}
</script>

<style lang="scss">
.note{
    
    .enwordPannel{
        width: 1140px;
        height: 300px;
        display:flex;
        max-height: 69px;
        overflow: hidden;
        transition: 1s max-height;
        .search{
            width: 30%;
            padding: 1em;
        }
        .explanation{
            width: 70%;
            padding: 1em;
            .expOfEnword{
                border-radius: .3em;
                border: 1px solid grey;
                height: 100%;
                padding: 1em;
            }
        }
    }
    

    .readingnote{
        min-height: 300px;
        width: 1140px;     
        display: flex;
        position: relative;
        .nmenu{
            width: 20%;
            
            .nmenu-list{
                height: 999px;
                max-height: 999px;
                
                overflow: scroll;
                overflow-x: hidden;
            }
        }
        .nmenuRef{
            width: 80%;
        }   
    }
}

//蒙板
.extendBar{
    width: 1140px;
    height: 30px;
    position: relative;
    top: -30px;
    z-index: 10;
    background-color : gray;
    text-align: center;
    opacity: .5;
    color: black;
    transition: 1s top;
}
.extendBar:hover{
    color: white;
    
}
.extendBar-top-0{
    top: 0px !important;
}
.height-300{
    max-height: 300px !important;
}

.dripdown-icon::before{
    content: "\e637";
    display: inline-block;
     
}

.rotateIcon::before{
    content: "\e637";
    -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
     -o-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     transform: rotate(180deg);
}

.m-center{
    margin : 0 auto;
}


</style>